<template>
  <div>
    <div class="add appBox">

      <div class="top flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="back">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title">用户详情</div>
        </div>
        <div>
          <!-- <el-button v-preventReClick type="primary"
                     @click="handleAction('FQZD')">
            发起薪酬账单
          </el-button> -->
          <!-- <el-button v-preventReClick type=""
                     @click="handleAction('BLLZ')">
            办理离职
          </el-button> -->
        </div>
      </div>

      <div class="user flex">

        <div>
          <img class="img"
               v-if="UserData?.avatar"
               :src="UserData?.avatar"
               alt="">
          <img class="img"
               v-else
               src="../../assets/logo.jpg"
               alt="">
        </div>

        <div class="ml20 w100">
          <div class="flex title">
            <div class="name">{{ UserData?.name }}</div>
            <div class="smallText ml10"> <span v-if="UserData?.sex == 1">女</span><span v-if="UserData?.sex == 2">男</span> /{{UserData?.age}}岁</div>
            <div class="ml20">
              <el-button v-preventReClick
                         type="warning"
                         size="small"
                         plain
                         v-if="UserData?.type == 0"> 游客 </el-button>
              <el-button v-preventReClick
                         type="primary"
                         size="small"
                         plain
                         v-if="UserData?.type == 1"> 普通用户 </el-button>
              <el-button v-preventReClick
                         type="primary"
                         size="small"
                         v-if="UserData?.type == 2"> 会员用户 </el-button>
              <el-button v-preventReClick
                         type="success"
                         size="small"
                         plain
                         v-if="UserData?.type == 3"> 创客用户 </el-button>
            </div>
          </div>
          <div class="mt20 userData">
            <div class="smallText mb20 userList">出生日期<span class="text">：{{UserData?.birthday}}</span></div>
            <div class="smallText mb20 userList">手机号<span class="text">：{{UserData?.phone}}</span></div>
            <div class="smallText mb20 userList">所在城市<span class="text">：{{UserData?.resideCityId}}</span></div>
            <div class="smallText mb20 userList">身份证号<span class="text">：{{UserData?.idCard}}</span></div>
            <div class="smallText mb20 userList">期望职位<span class="text">：{{ $filter.positionType(UserData?.positionTypeId) }}</span></div>
            <div class="smallText mb20 userList">期望薪资<span class="text">：{{UserData?.salaryStart}}-{{UserData?.salaryEnd}}/{{UserData?.salaryType == 0 ? '日':'月'}} </span></div>
            <div class="smallText mb20 userList">工作城市<span class="text">：{{ UserData?.city }}</span></div>
            <div class="smallText mb20 userList">到职时间<span class="text">：
                <span class="error fb"
                      v-if=" UserData?.workTime == 0">不确定</span>
                <span class="primary fb"
                      v-if=" UserData?.workTime == 1">随时到职</span>
                <span class="primary fb"
                      v-if=" UserData?.workTime == 2">本周到职</span>
                <span class="success fb"
                      v-if=" UserData?.workTime == 3">本月到职</span>
                <span class="warning fb"
                      v-if=" UserData?.workTime == 4">下月初到职</span>
              </span></div>
          </div>
        </div>

      </div>

      <div class="tables mt20 flex1">
        <el-tabs type="border-card">

          <el-tab-pane label="打卡记录">
            <el-table :data="tableData1"
                      style="width: 100%"
                      border
                      v-loading="loading"
                      :header-cell-style="{ color: '#000' }">
              <el-table-column prop=""
                               label="打卡公司"
                               show-overflow-tooltip
                               align="left">
                <template #default="scope">
                  {{ scope.row.childCompanyName ? scope.row.childCompanyName : scope.row.company}}
                </template>
              </el-table-column>
              <el-table-column prop="time"
                               label="打卡时间"
                               show-overflow-tooltip
                               align="center">

              </el-table-column>

              <el-table-column prop="remark"
                               label="备注"
                               show-overflow-tooltip
                               align="center">

              </el-table-column>
              <!-- <el-table-column prop="managerName"
                               label="招聘经理人"
                               show-overflow-tooltip
                               align="center" /> -->

            </el-table>
            <div class="pagination">
              <el-pagination background
                             v-model:current-page="params1.pageNum"
                             v-model:page-size="params1.pageSize"
                             :page-sizes="[10, 20, 30, 50]"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="totalSize1"
                             @size-change="handleSizeChange1"
                             @current-change="handleCurrentChange1" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="工作经验">
            <el-table :data="tableData2"
                      style="width: 100%"
                      border
                      v-loading="loading"
                      :header-cell-style="{ color: '#000' }">
              <el-table-column prop=""
                               label="企业名称"
                               show-overflow-tooltip
                               align="left">
                <template #default="scope">
                  {{ scope.row.childCompanyName ? scope.row.childCompanyName : scope.row.dispatch}}
                </template>
              </el-table-column>
              <el-table-column prop="dispatchPosition"
                               label="岗位"
                               show-overflow-tooltip
                               align="center" />
              <el-table-column prop="clock"
                               label="打卡天数"
                               show-overflow-tooltip
                               align="center">
              </el-table-column>
              <el-table-column prop="inductionTime"
                               label="入职时间"
                               show-overflow-tooltip
                               align="center">
              </el-table-column>
              <el-table-column prop="departTime"
                               label="离职时间"
                               show-overflow-tooltip
                               align="center" />
            </el-table>
            <div class="pagination">
              <el-pagination background
                             v-model:current-page="params2.pageNum"
                             v-model:page-size="params2.pageSize"
                             :page-sizes="[10, 20, 30, 50]"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="totalSize2"
                             @size-change="handleSizeChange2"
                             @current-change="handleCurrentChange2" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="收益明细">
            <div class="boxContent">
              <div class="searchList">
                <el-form :model="params3"
                         ref="FormInstance"
                         class="boxFrom">
                  <div class="searchBox flex">
                    <template v-for="(item, index) in totalInputColumns3"
                              :key="index">
                      <el-form-item v-if="item.type == 'input'">
                        <el-input v-model="params3[item.key]"
                                  :placeholder="item.label"></el-input>
                      </el-form-item>

                      <el-form-item v-if="item.type == 'select'">
                        <el-select v-model="params3[item.key]"
                                   :placeholder="item.label"
                                   clearable
                                   v-if="item.key == 'type'">
                          <el-option label="推荐奖励"
                                     value="推荐奖励" />
                          <el-option label="绩效奖励"
                                     value="绩效奖励" />
                          <el-option label="入职奖励"
                                     value="入职奖励" />
                        </el-select>
                        <el-date-picker v-model="params3[item.key]"
                                        type="month"
                                        value-format="YYYY-MM"
                                        v-if="item.key == 'grantMonth'"
                                        :placeholder="item.label" />
                        <el-date-picker v-model="params3[item.key]"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        v-if="item.key == 'grantDate'"
                                        :placeholder="item.label" />
                      </el-form-item>
                    </template>
                  </div>

                  <el-form-item class="btns">
                    <el-button v-preventReClick
                               type="primary"
                               plain
                               @click="handleAction('query3')">搜索</el-button>
                    <el-button v-preventReClick
                               @click="handleAction('reset3')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <el-table :data="tableData3"
                      style="width: 100%"
                      border
                      v-loading="loading"
                      :header-cell-style="{ color: '#000' }">
              <el-table-column prop="grantTime"
                               label="发放时间"
                               show-overflow-tooltip
                               align="center">
              </el-table-column>

              <el-table-column prop="type"
                               label="绩效奖励类型"
                               show-overflow-tooltip
                               align="center">

              </el-table-column>
              <el-table-column prop="money"
                               label="金额"
                               show-overflow-tooltip
                               align="center" />
            </el-table>
            <div class="pagination">
              <el-pagination background
                             v-model:current-page="params3.pageNum"
                             v-model:page-size="params3.pageSize"
                             :page-sizes="[10, 20, 30, 50]"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="totalSize3"
                             @size-change="handleSizeChange3"
                             @current-change="handleCurrentChange3" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="邀请人名单">
            <div class="boxContent">
              <div class="searchList">
                <el-form :model="params4"
                         ref="FormInstance"
                         class="boxFrom">
                  <div class="searchBox flex">
                    <template v-for="(item, index) in totalInputColumns4"
                              :key="index">
                      <el-form-item v-if="item.type == 'input'">
                        <el-input v-model="params4[item.key]"
                                  :placeholder="item.label"></el-input>
                      </el-form-item>

                      <el-form-item v-if="item.type == 'select'">
                        <!-- <el-select v-model="params4[item.key]"
                                   :placeholder="item.label"
                                   clearable
                                   v-if="item.key == 'type'">
                          <el-option />
                        </el-select> -->

                        <el-date-picker v-model="params4[item.key]"
                                        type="month"
                                        clearable
                                        :placeholder="item.label"
                                        value-format="YYYY-MM"
                                        v-if="item.key == 'grantMonth'" />
                        <el-date-picker v-model="params4[item.key]"
                                        type="date"
                                        clearable
                                        value-format="YYYY-MM-DD"
                                        v-if="item.key == 'grantDate'"
                                        :placeholder="item.label" />
                      </el-form-item>
                    </template>
                  </div>

                  <el-form-item class="btns">
                    <el-button v-preventReClick
                               type="primary"
                               plain
                               @click="handleAction('query4')">搜索</el-button>
                    <el-button v-preventReClick
                               @click="handleAction('reset4')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <el-table :data="tableData4"
                      style="width: 100%"
                      border
                      v-loading="loading"
                      :header-cell-style="{ color: '#000' }">
              <el-table-column prop="firstName"
                               label="被邀请人"
                               show-overflow-tooltip
                               align="center">
              </el-table-column>
              <!-- <el-table-column prop="secondName"
                               label="被邀请人（二级）"
                               show-overflow-tooltip
                               align="center" /> -->
              <el-table-column prop="totalAmount"
                               label="总收益"
                               show-overflow-tooltip
                               align="center" />
              <el-table-column prop="dateAmount"
                               label="当日收益"
                               show-overflow-tooltip
                               align="center" />
              <el-table-column prop="userType"
                               label="用户状态"
                               show-overflow-tooltip
                               align="center">
                <template #default="scope">
                  <span v-if="scope.row.userType == 0">待入职</span>
                  <span v-if="scope.row.userType == 1">在职</span>
                  <span v-if="scope.row.userType == 2">离职</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination background
                             v-model:current-page="params4.pageNum"
                             v-model:page-size="params4.pageSize"
                             :page-sizes="[10, 20, 30, 50]"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="totalSize4"
                             @size-change="handleSizeChange4"
                             @current-change="handleCurrentChange4" />
            </div>
          </el-tab-pane>

        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import chooseAddress from "@/components/map.vue";
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {
    chooseAddress,
  },
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        UserData: {},
        loading: false,

        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        ruleForm: {
          cid: "",
          companyName: "",
          status: "",
          type: "",
          name: "",
          remark: "",
        },
        totalInputColumns3: [
          { key: "grantMonth", label: "选择发放月份", type: "select" },
          { key: "grantDate", label: "选择发放时间", type: "select" },
          { key: "type", label: "选择绩效奖励类型", type: "select" },
        ],
        totalInputColumns4: [
          { key: "grantMonth", label: "选择发放月份", type: "select" },
          { key: "grantDate", label: "选择发放时间", type: "select" },
          { key: "type", label: "选择绩效奖励类型", type: "select" },
        ],
        totalSize4: 0,
        totalSize3: 0,
        totalSize2: 0,
        totalSize1: 0,
        params3: {
          pageNum: 1,
          pageSize: 10,
          userId: route.query.id,
        },
        params1: {
          pageNum: 1,
          pageSize: 10,
        },
        params2: {
          id: route.query.id,
          pageNum: 1,
          pageSize: 10,
        },
        params4: {
          pageNum: 1,
          pageSize: 10,
          userId: route.query.id,
        },
      };
    };
    const state = reactive(initState());
    onMounted(() => {
      methods.getDataList()
      if (route.query.id) {
        methods.getUserData()
        methods.tableList()
      }
    });
    const methods = {
      handleAction (type, data) {
        switch (type) {
          case "query3": //查询
            methods.tableList()
            break;
          case "reset3": // 重置
            state.params3 = initState().params3;
            break;
          case "query4": //查询
            methods.tableList()
            break;
          case "reset4": // 重置
            state.params4 = initState().params4;
            break;
          case "FQZD": // 发起账单
            break;
          case "BLLZ": // 办理离职
            break;
        }
      },
      // 用户数据
      getUserData () {
        app.$post('/sys/companystaff/detail/userinfo?id=' + route.query.id).then(res => {
          state.UserData = res.data
          console.log(state.UserData);
        })
      },
      // 列表数据
      tableList () {
        app.$post('/sys/companystaff/detail/workhistory', state.params2).then(res => {
          if (res.data) {
            state.tableData2 = res.data.list
            state.totalSize2 = res.data.total
          }
        })
        app.$post('/userInfo/invite/records', state.params4).then(res => {
          if (res.data) {
            state.totalSize4 = res.data.total
            state.tableData4 = res.data.list
          }
        })
        app.$post('/companystaffWork/getCompanyStaffWorkList', {
          userInfoId: route.query.id,
          pageNum: state.params1.pageNum,
          pageSize: state.params1.pageSize,
        }
        ).then(res => {
          if (res.data) {
            state.totalSize1 = res.data.total
            state.tableData1 = res.data.list
          }
        })
        app.$post('sys/companystaff/userinfoMoneyPage', state.params3).then(res => {
          if (res.data) {
            state.totalSize3 = res.data.total
            state.tableData3 = res.data.list
          }
        })
      },
      // 列表数据
      getDataList () { },
      //分页变化
      handleSizeChange3 () {
        state.params3.pageNum = 1;
        methods.tableList();
      },
      //表格翻页
      handleCurrentChange3 () {
        methods.tableList();
      },
      //分页变化
      handleSizeChange2 () {
        state.params2.pageNum = 1;
        methods.tableList();
      },
      //表格翻页
      handleCurrentChange2 () {
        methods.tableList();
      },

      //分页变化
      handleSizeChange4 () {
        state.params4.pageNum = 1;
        methods.tableList();
      },
      //表格翻页
      handleCurrentChange4 () {
        methods.tableList();
      },
      //分页变化
      handleSizeChange1 () {
        state.params1.pageNum = 1;
        methods.tableList();
      },
      //表格翻页
      handleCurrentChange1 () {
        methods.tableList();
      },

      back () {
        router.go(-1);
      },
      submit () {
        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              text: "加载中..",
            });
            let url = "/sys/role/modify/role";
            let data = JSON.parse(JSON.stringify(state.ruleForm));
            app.$http.post(url, data).then((res) => {
              if (res.code == 200) {
                ElMessage({
                  message: "成功保存",
                  type: "success",
                });
                router.go(-1);
              }
              loading.close();
            }).catch(() => {
              loading.close();
            });
          }
        });
      },

    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.tables {
  overflow: hidden;
}
.el-table {
  overflow: hidden;
}
.pagination {
  margin-top: 20px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
.add {
  .demo-ruleForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top {
    .ruturn {
      color: rgba(121, 121, 121, 1);
      font-size: 16px;
      position: relative;
      margin-left: 10px;
      margin-top: -2px;
    }
    .ruturn::before {
      content: '';
      position: absolute;
      left: 50px;
      top: 4px;
      width: 1px;
      height: 16px;
      background: rgba(121, 121, 121, 0.8);
    }
    .left {
      align-items: center;
    }
    .title {
      color: rgb(83, 83, 83);
      font-size: 16px;
      margin-left: 40px;
      font-weight: bold;
    }
  }
  .title {
    align-items: center;
  }
  .user {
    margin-top: 40px;
    font-size: 14px;
    .w100 {
      width: 100%;
    }
    .userData {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .userList {
      width: 25%;
      text-align: left;
    }
    .smallText {
      color: #999;
    }
    .text {
      color: #000;
    }
    .name {
      font-size: 16px;
    }
    .img {
      border-radius: 50%;
      width: 120px;
      height: 120px;
    }
  }
}
.el-tabs {
  height: 100%;
  flex-direction: column;
  ::v-deep(.el-tabs__content) {
    height: calc(100% - 40px);
    overflow: hidden;
  }
}
.el-tab-pane {
  display: flex;
  height: 100%;
  flex-direction: column;
  ::v-deep(.el-table) {
    flex: 1;
  }
}
</style>
